import { getDicByKey } from '@/support/common';
import '@ant-design/compatible/assets/index.css';
import { Card, Table } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import PateoSearchForm from '../../../components/common/PateoSearchForm';
import Ellipsis from '../../../components/Ellipsis';

const mapStateToProps = (state: any) => {
  return {
    list: state.series,
    loading: state.loading.effects['series/getFetchPage'],
  };
};

class AccountLog extends PureComponent<any, any> {
  static contextTypes = {
    dicData: PropTypes.any,
  };

  state = {
    formValues: {},
  };

  componentDidMount() {
    const { dispatch } = this.props;
    // const { formValues } = this.state;

    const brandId1 = { brandId: this.searchForm.current?.getFieldValue('brandId') };
    this.setState({
      formValues: Object.assign(this.state.formValues, brandId1),
    });
    dispatch({
      type: 'series/getFetchPage',
      payload: { url: '/basedata/series', ...brandId1 },
    });
  }

  dataFormat = (fields: any) => {
    return fields;
  };

  handleFormReset = () => {
    this.searchForm.current.setFieldsValue({ brandId: 'MATC' });
    this.setState({
      formValues: {
        brandId: this.searchForm.current?.getFieldValue('brandId'),
      },
    });
  };

  handleTableChange = (pagination: any, filters: any) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    const { current, pageSize } = pagination;
    this.setState({ pagination });
    const params = {
      page: current - 1,
      size: pageSize,

      ...formValues,
      ...filters,
    };
    dispatch({
      type: 'series/getFetchPage',
      payload: { url: '/basedata/series', ...params },
    });
  };

  render() {
    const {
      list: {
        pageData: { list, pagination },
      },
      loading,
    } = this.props;
    const columns = [
      {
        title: '品牌',
        dataIndex: 'brandId',
        width: '20%',

        render: text => {
          if (text) {
            return getDicByKey(this.context.dicData, 'optBrand', text) || text;
          } else {
            return text;
          }
        },
      },
      {
        title: '车系名称',
        dataIndex: 'name',
        width: '20%',
        render: val => (
          <Ellipsis length={10} tooltip>
            {val}
          </Ellipsis>
        ),
      },
      {
        title: '车系代码',
        dataIndex: 'code',
        width: '20%',
      },
      {
        title: '备注',
        dataIndex: 'remark',
        width: '20%',
        render: val => (
          <Ellipsis length={10} tooltip>
            {val}
          </Ellipsis>
        ),
      },
      {
        title: '创建时间',
        dataIndex: 'createDate',
        width: '20%',
        render: val => (
          <Ellipsis length={20} tooltip>
            {moment(val).format('YYYY-MM-DD HH:mm:ss')}
          </Ellipsis>
        ),
      },
    ];

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
      showTotal: () => (
        <span>共&nbsp;{pagination === undefined ? 0 : pagination.total}&nbsp;条</span>
      ),
    };

    const searchItems = [
      {
        title: '品牌',
        type: 'select',
        // customStyle: 6,
        initialValue: 'MATC',
        selectOptions: [{ value: 'MATC', label: '猛士科技' }],
        key: 'brandId',
        rules: [{ required: true, message: '品牌为必选项！' }],
      },
      {
        title: '车系名称',
        type: 'input',
        key: 'name',
      },
    ];

    return (
      <div>
        <Card bordered={false}>
          <PateoSearchForm
            onRef={(val: any) => (this.searchForm = val)}
            searchItems={searchItems}
            fetchParams={{ type: 'series/getFetchPage', url: '/basedata/series', extraArgs: {} }}
            saveFormValues={(val: any) => {
              this.setState({
                formValues: Object.assign(this.state.formValues, val),
              });
            }}
            handleFormReset={this.handleFormReset}
            handleFieldsValue={this.dataFormat}
          />
        </Card>
        <Card style={{ marginTop: 12 }} bordered={false}>
          <Table
            // size={'small'}

            rowKey={record => record.sid}
            dataSource={list}
            loading={loading}
            columns={columns}
            pagination={paginationProps}
            onChange={this.handleTableChange}
            scroll={{ x: '100%' }}
          />
        </Card>
      </div>
    );
  }
}

export default connect(mapStateToProps)(AccountLog);
